var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var del = require('del');

//编译js
gulp.task('indexJs',function () {
   return browserify('./source/index.js')
       .transform(babelify,{presets:["react"]})//正如您所看到的，.transform(babelify)函数会在JSX与其他Javascript代码合并之前将JSX代码转换为Javascript代码
       .bundle()
       .pipe(source('index.js'))
       .pipe(gulp.dest('./build/'));

})


//编译js
gulp.task('testJs',function () {
   return browserify('./source/test.js')
       .transform(babelify,{presets:["react"]})//正如您所看到的，.transform(babelify)函数会在JSX与其他Javascript代码合并之前将JSX代码转换为Javascript代码
       .bundle()
       .pipe(source('test.js'))
       .pipe(gulp.dest('./build/'));

})


//编译scss

gulp.task('indexCss',function () {
   return gulp.src('./source/app.scss')
       .pipe(sass())
       .pipe(gulp.dest('./build/'));
})


//clean

gulp.task('clean',function () {
   return del(['build/*.js', 'build/index.css']).then(paths => {
      console.log('Deleted files and folders:\n', paths.join('\n'));
   });
})

//监听文件变化

gulp.task('watch',function () {
   gulp.run('clean');
   gulp.run('indexJs','indexCss','testJs');
   gulp.watch(['./source/index.js','./source/test.js','./source/app.scss'],function () {
      gulp.run('clean','indexJs','indexCss','testJs');
   })
})